<template>
    <div class="dpa-header">
        <!--logo-->
        <div class="logo"> <img :src="logo || Logo" /> </div>
        <!--标题-->
        <div class="placeholder"></div>
        <div class="title" :style="titleStyle.style" v-if="titleStyle.show">
            {{ titleStyle.title }}
        </div>
        <div class="config">
          <a-popover placement="bottom" overlayClassName="header-popover" v-if="h5ProductUrl">
            <template #content>
              <vue-qrcode :value="h5ProductUrl" :options="{ width: 120 }" />
              <div class="ql-align-center">扫码后，进入移动端</div>
            </template>
            <div class="header-qrcode-wrapper">
              <QrcodeOutlined class="header-qrcode" />
              <span style="margin-left: 5px">移动端入口</span>
            </div>
          </a-popover>
            <!-- 帮助中心 -->
            <a-button v-if="portalConfiguration.helpCenterDisplay" type="text" class="horizontal-btn" @click="jumpHelpDocs">
                {{ t('helpCenter') }}
            </a-button>
            <!--用户-->
            <div class="userinfo">
                <user-info popup-ccontiner="'body'">
                    <template #prefixIcon> <img :src="userImg" class="prefix-icon" alt="" /> </template>
                </user-info>
            </div>
            <!--时间-->
            <div class="time"> <img :src="systemTimeImg" class="system-time-icon" alt="" /> {{ time }} </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { defineComponent, ref, computed } from 'vue'
    import Logo from '@/assets/logo.png'
    import UserInfo from '@/layouts/components/UserInfo.vue'
    import userImg from '@/assets/images/user.png'
    import systemTimeImg from '@/assets/images/system-time.png'
    import { getStorageByKey } from '@/utils/common'
    import dayjs from 'dayjs'
    import { CURRENT_TIME } from '@/enums/cacheEnum'
    import { useI18n } from 'vue-i18n'
    import { layoutProps } from '../../AlLayoutDpa/props'
    // import VueQrcode from '@chenfengyuan/vue-qrcode'
    import { useSystemStore } from '@/store/modules/system'

    export default defineComponent({
        name: 'DpaHeader',
        components: {
            UserInfo,
            // VueQrcode
        },
        props: {
            portalConfiguration: {
                type: Object,
                default: () => ({})
            },
            titleStyle: {
                type: Object,
                default: () => {}
            },
            logo: {
                type: String
            },
            ...layoutProps
        },
        setup(props) {
            const { t } = useI18n()
            const time = ref('')
          const systemStore = useSystemStore()
          const h5ProductUrl = computed(() => systemStore.currentH5ProductUrl)
            time.value = getStorageByKey(CURRENT_TIME) || dayjs().format('YYYY.MM.DD')

            // 帮助中心
            function jumpHelpDocs() {
                const url = `${location.origin}${props.portalConfiguration.helpCenterSettings}`;
                window.open(url);
            }
            return {
                time,
                Logo,
                userImg,
                systemTimeImg,
                jumpHelpDocs,
                t,
                h5ProductUrl
            }
        }
    })
</script>

<style lang="less" scoped>
    .dpa-header {
        display: flex;
        align-items: center;
        position: relative;

        .logo {
            padding-right: 16px;

            img {
                height: 38px;
            }
        }

        .placeholder {
            flex: 1;
        }

        .title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-family: PingFangSC-Medium;
            font-size: 24px;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;
            line-height: 32px;
        }

        .config {
            display: flex;
            color: #f4dccb;
            font-size: 14px;

            .horizontal-btn {
                display: inline-block;
                padding: 0 15px;
                line-height: 62px;
                height: 62px;
                color: #f4dccb;
            }
          .header-qrcode-wrapper {
            display: inline-flex;
            align-items: center;
            margin-right: 10px;
            cursor: pointer;
            .header-qrcode {
              margin: 2px 10px 0 0;
            }
          }
            .userinfo {
                margin-right: 32px;

                .user-name {
                    display: flex;
                    align-items: center;

                    .prefix-icon {
                        margin-right: 8px;
                    }

                    :deep(.ml10) {
                        margin-left: 2px;
                    }
                }

                :deep(.@{ant-prefix}-dropdown) {
                    .@{ant-prefix}-dropdown-menu {
                        background: #ffffff;
                        border: 1px solid #40a9ff;
                        border-radius: 4px;
                    }
                }
            }

            .time {
                display: flex;
                align-items: center;

                .system-time-icon {
                    margin-right: 8px;
                }
            }
        }
    }
</style>

<i18n>
zh-CN:
  helpCenter: "帮助中心"
en-US:
  helpCenter: "help center"
</i18n>
